<xsl:stylesheet version="1.1"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"                
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">

	<xsl:param name="widget-active-light">#4444dd</xsl:param>
	<xsl:param name="widget-active-background">#2222aa</xsl:param>
	<xsl:param name="widget-active-stroke-color">#8888ff</xsl:param>
	<xsl:param name="widget-active-foreground">#ffffff</xsl:param>

	<xsl:param name="widget-inactive-light">#888888</xsl:param>
	<xsl:param name="widget-inactive-background">#444444</xsl:param>
	<xsl:param name="widget-inactive-stroke-color">#888888</xsl:param>
	<xsl:param name="widget-inactive-foreground">#ffffff</xsl:param>

	<xsl:param name="widget-stroke-width">3</xsl:param>
	
	<xsl:param name="window-background">#ffffff</xsl:param>
	<xsl:param name="window-light">#ffffff</xsl:param>
	<xsl:param name="shadow-color">#000000</xsl:param>
	<xsl:param name="shadow-opacity">0.5</xsl:param>
	<xsl:param name="icon-stroke-color">#ffffff</xsl:param>
	<xsl:param name="icon-stroke-width">1</xsl:param>
	
	<xsl:param name="component"/>

	<xsl:param name="tab-width">64</xsl:param>
	<xsl:param name="tab-height">64</xsl:param>
	<xsl:param name="tab-gap">4</xsl:param>
	<xsl:param name="tab-rounding">14</xsl:param>
	<xsl:param name="main-width">480</xsl:param>
	<xsl:param name="main-height">480</xsl:param>
	<xsl:param name="nav-height">52</xsl:param>
	
	<xsl:param name="default-light-z">1000</xsl:param>

  	<xsl:output method="xml"/>
  
  	<xsl:template match="/">
  		<xsl:choose>
  			<xsl:when test="$component = 'tab_active'">
  				<xsl:call-template name="tab">
  					
  				</xsl:call-template>
  			</xsl:when>
  			<xsl:when test="$component = 'tab_inactive'">
  				<xsl:call-template name="tab">
			  		<xsl:with-param name="tab-fill-color" select="$widget-inactive-background"/>
			  		<xsl:with-param name="tab-fill-light" select="$widget-inactive-light"/>
			  		<xsl:with-param name="above-bar-fill-color" select="$widget-active-background"/>
			  		<xsl:with-param name="inactive">true</xsl:with-param>
  				</xsl:call-template>
  			</xsl:when>
  			<xsl:when test="$component = 'tab_background'">
  				<xsl:call-template name="tab-box"/>
  			</xsl:when>
  			<xsl:when test="$component = 'icon_project'">
  				<xsl:call-template name="icon-project"/>
  			</xsl:when>
  			<xsl:when test="$component = 'icon_expert'">
  				<xsl:call-template name="icon-expert"/>
  			</xsl:when>
  			<xsl:when test="$component = 'icon_answers'">
  				<xsl:call-template name="icon-answers"/>
  			</xsl:when>
  			<xsl:when test="$component = 'icon_info'">
  				<xsl:call-template name="icon-info"/>
  			</xsl:when>
  			<xsl:when test="$component = 'icon_results'">
  				<xsl:call-template name="icon-results"/>
  			</xsl:when>
  			<xsl:when test="$component = 'nav_bar'">
  				<xsl:call-template name="nav-bar"/>
  			</xsl:when>
  			<xsl:when test="$component = 'nav_button'">
  				<xsl:call-template name="nav-button"/>
  			</xsl:when>
  			<xsl:when test="$component = 'radio_button_unchecked'">
  				<xsl:call-template name="radio-button">
  					<xsl:with-param name="checked" select="false()"/>
  				</xsl:call-template>
  			</xsl:when>
  			<xsl:when test="$component = 'radio_button_checked'">
  				<xsl:call-template name="radio-button">
  					<xsl:with-param name="checked" select="true()"/>
  				</xsl:call-template>
  			</xsl:when>
  			<xsl:when test="$component = 'list_item_background'">
  				<xsl:call-template name="list-item-background"/>
  			</xsl:when>
  			<xsl:otherwise>
  				<xsl:call-template name="gradient-box"/>
  			</xsl:otherwise>
  		</xsl:choose>
  	</xsl:template>
  	
  	<xsl:template name="list-item-background">
  		<xsl:param name="width" select="$main-width"/>
  		<xsl:param name="height" select="$nav-height"/>
  		<xsl:param name="background" select="$widget-active-background"/>
  		<xsl:param name="highlight" select="$widget-active-light"/>
  		<xsl:param name="gradient-height" select="$height div 12"/>
  		<xsl:param name="separator" select="$widget-active-light"/>
  		<xsl:param name="separator-width">5</xsl:param>
  		
  		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
  			<defs>
 				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">bg-filter</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$highlight"/>
					<xsl:with-param name="show-shadow">false</xsl:with-param>
					<xsl:with-param name="light-x" select="$width div 2"/>
					<xsl:with-param name="light-y" select="0"/>					
					<xsl:with-param name="blur" select="$gradient-height"/>
				</xsl:call-template>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="-100" y="0" width="{$width * 2}" height="120">
  <desc>Produces a 3D lighting effect.</desc>
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
  <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
  <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                      specularExponent="20" lighting-color="{$highlight}" 
                      result="specOut">
    <fePointLight x="{$width div 2}" y="-100" z="200"/>
  </feSpecularLighting>
  <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
  <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
               k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
  <feMerge>
    <feMergeNode in="litPaint"/>
  </feMerge>
</filter>  			
				<linearGradient id="top-light" x1="0%" y1="0%" x2="0%" y2="100%" units="objectBoundingBox">
					<stop offset="0" stop-color="{$highlight}"/>
					<stop offset="20%" stop-color="{$highlight}" stop-opacity="0.5"/>
					<stop offset="100%" stop-color="{$background}" stop-opacity="0"/>
				</linearGradient>  
				<linearGradient id="bottom-light" x1="0%" y1="0%" x2="0%" y2="100%" units="objectBoundingBox">
					<stop offset="0" stop-color="{$background}" stop-opacity="1"/>
					<stop offset="100%" stop-color="{$highlight}" stop-opacity="0"/>
				</linearGradient>  
  			</defs>
  			<g>
  				<rect x="{-$width}" y="0" width="{$width * 3}" height="{$height}" fill="{$background}" stroke="{$background}"  filter="url(#MyFilter)"/>
  				<!-- 
  				<rect x="0" y="0" width="{$width}" height="{$gradient-height}" fill="url(#top-light)" stroke="none"/>
  				<g transform="translate(0, {$height})">				
	  				<rect x="0" y="0" width="{$width}" height="{$gradient-height}" fill="url(#top-light)" stroke="none" transform="scale(1, -1)"/>
  				</g>
  				 -->
  			</g>
  		</svg>
  	</xsl:template>
  	
  	<xsl:template name="radio-button">
  		<xsl:param name="checked"/>
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width">2</xsl:param>
  		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
  			<g>
  				<circle cx="{$width div 2}" cy="{$height div 2}" r="{$width div 2 - $stroke-width}" stroke-width="{$stroke-width}" stroke="{$color}" fill="none"/>
  				<circle cx="{$width div 2}" cy="{$height div 2}" r="{$width div 4}" stroke-width="{$stroke-width}" stroke="{$color}">
  					<xsl:attribute name="fill">
	  					<xsl:choose>
		  					<xsl:when test="$checked = true()">
		  						<xsl:value-of select="$color"/>
		  					</xsl:when>
		  					<xsl:otherwise>
		  						<xsl:text>none</xsl:text>
		  					</xsl:otherwise>
	  					</xsl:choose>
  					</xsl:attribute>
  				</circle>
  			</g>
  		</svg>
  	</xsl:template>

  	<xsl:template name="nav-button">
  		<xsl:param name="width" select="$nav-height div 2"/>
  		<xsl:param name="height" select="$nav-height div 2"/>
  		<xsl:param name="rounding" select="$width div 4"/>
  		<xsl:param name="background" select="$widget-active-background"/>
  		<xsl:param name="stroke-width">1</xsl:param>
		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}" version="1.1">
			<g>
  				<path d="M {$rounding + $stroke-width} {$stroke-width} 
  						 L {$width - $rounding - $stroke-width}, {$stroke-width} 
  						 A {$rounding}, {$rounding} 0 0, 1 {$width - $stroke-width} {$rounding + $stroke-width}
  						 L {$width - $stroke-width}, {$height - $rounding - $stroke-width}
  						 A {$rounding}, {$rounding} 0 0, 1 {$width - $rounding - $stroke-width}, {$height - $stroke-width}
  						 L {$rounding + $stroke-width}, {$height - $stroke-width}
  						 A {$rounding}, {$rounding} 0 0, 1 {$stroke-width}, {$height - $rounding - $stroke-width}
  						 L {$stroke-width}, {$rounding + $stroke-width}
  						 A {$rounding}, {$rounding} 0 0, 1 {$rounding + $stroke-width}, {$stroke-width}
  						 z" stroke="black" stroke-width="1" fill="{$background}"/>
			</g>			
		</svg>
	</xsl:template>
	  	
  	<xsl:template name="nav-bar">
  		<xsl:param name="width" select="$main-width"/>
  		<xsl:param name="height" select="$nav-height"/>
  		<xsl:param name="background" select="$widget-active-background"/>
  		<xsl:param name="light" select="$widget-active-light"/>
  		<xsl:param name="shadow-width" select="$tab-gap"/>
		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}" version="1.1">
			<defs>
				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">bg-filter</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$light"/>
					<xsl:with-param name="show-shadow">true</xsl:with-param>
					<xsl:with-param name="light-x" select="$width div 2"/>
					<xsl:with-param name="light-y" select="0"/>					
					<xsl:with-param name="blur" select="$shadow-width"/>
				</xsl:call-template>
				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">bg-filter-no-shadow</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$light"/>
					<xsl:with-param name="show-shadow">false</xsl:with-param>
					<xsl:with-param name="light-x" select="$width div 2"/>
					<xsl:with-param name="light-y" select="0"/>					
				</xsl:call-template>				
			</defs>
			<g>
				<rect x="{-$width}" y="{-$height}" width="{$width * 3}" height="{$height * 3}" fill="{$background}" stroke="none" filter="url(#bg-filter-no-shadow)"/>
				<rect x="{-$width}" y="{-$height}" width="{$width * 3}" height="{$height * 2}" fill="{$background}" stroke="none" filter="url(#bg-filter)"/>
			</g>
		</svg>
  		
  	</xsl:template>
  	
  	<xsl:template name="icon-results">
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width" select="$icon-stroke-width"/>
  		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
  			<g>
  				<g transform="translate({$width div 2}, {$height div 2})">
	  				<xsl:call-template name="clock">
	  					<xsl:with-param name="width" select="$width div 2"/>
	  					<xsl:with-param name="height" select="$height div 2"/>
	  				</xsl:call-template>
  				</g>
  				<text x="{$width * 0.75}" y="{$height div 2}" stroke="none" fill="{$color}" transform="rotate(-10)">$</text>
				<clipPath id="circle">
			    	<circle cx="{$width * 0.75}" cy="{$height * 0.75}" r="{$width div 4}"/>
			  	</clipPath>
			  	<clipPath id="invertedCircle">
			  		<rect x="0" y="0" width="{$width}" height="{$height}" clip-path="url(#circle)"/>
			  	</clipPath>
			  	<g clip-path="url(#invertedCircle)">
	  				<g transform="rotate(5, 0, {$height * 0.7})">
	  					<g tranform="translate({$stroke-width}, {$stroke-width})">
			  				<xsl:call-template name="calendar">
			  					<xsl:with-param name="width" select="$width * 0.7"/>
			  					<xsl:with-param name="height" select="$height * 0.7"/>
			  				</xsl:call-template>
			  			</g>
	  				</g>
	  			</g>
  			</g>
  		</svg>
  		  		
  	</xsl:template>
  	
  	<xsl:template name="calendar">
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width" select="$icon-stroke-width"/>
		<rect x="0" y="0" width="{$width}" height="{$height}" stroke="{$color}" stroke-width="{$stroke-width}" fill="none"/>
		<line x1="0" y1="{$height div 4}" x2="{$width}" y2="{$height div 4}" stroke="{$color}" stroke-width="{$stroke-width}"/>   		
		<line x1="0" y1="{$height div 2}" x2="{$width}" y2="{$height div 2}" stroke="{$color}" stroke-width="{$stroke-width}"/>   		
		<line x1="0" y1="{$height * 0.75}" x2="{$width}" y2="{$height * 0.75}" stroke="{$color}" stroke-width="{$stroke-width}"/> 
		<line x1="{$width div 4}" y1="{$height div 4}" x2="{$width div 4}" y2="{$height}" stroke="{$color}" stroke-width="{$stroke-width}"/>
		<line x1="{$width div 2}" y1="{$height div 4}" x2="{$width div 2}" y2="{$height}" stroke="{$color}" stroke-width="{$stroke-width}"/>
		<line x1="{$width * 0.75}" y1="{$height div 4}" x2="{$width * 0.75}" y2="{$height}" stroke="{$color}" stroke-width="{$stroke-width}"/>
  	</xsl:template>
  	
  	<xsl:template name="clock">
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width" select="$icon-stroke-width"/>
  		<xsl:variable name="r2" select="$width div 2 - $stroke-width - $width div 8"/>
		<circle cx="{$width div 2}" cy="{$height div 2}" r="{$width div 2 - $stroke-width}" fill="none" stroke="{$color}" stroke-width="{$stroke-width}"/>
		<circle cx="{$width div 2}" cy="{$height div 2}" r="{$r2}" fill="none" stroke="{$color}" stroke-width="{$stroke-width}"/>		  		
		<line x1="{$width div 2}" y1="{$height div 2}" x2="{$width div 2}" y2="{$height div 2 - $r2 + $stroke-width}" stroke="{$color}" stroke-width="{$stroke-width}"/>
		<line x1="{$width div 2}" y1="{$height div 2}" x2="{$width * 0.75}" y2="{$height * 0.25}" stroke="{$color}" stroke-width="{$stroke-width}"/>
  	</xsl:template>

  	<xsl:template name="icon-info">
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width" select="$icon-stroke-width"/>
  		
  		<xsl:variable name="r" select="$width div 8"/>
  		<xsl:variable name="cx" select="$width div 2"/>
  		<xsl:variable name="cy" select="$r + $stroke-width"/>
  		
  		<xsl:variable name="i-y-min" select="$cy + $r * 2"/>
  		<xsl:variable name="i-y-max" select="$height - $stroke-width"/>
  		<xsl:variable name="i-w" select="$r"/>
  		
  		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
  			<g>
  				<circle cx="{$cx}" cy="{$cy}" r="{$r}" stroke-width="{$stroke-width}" stroke="{$color}" fill="none"/>
				<path d="M {$width div 2 - $i-w * 1.2}, {$i-y-min} 
						 L {$width div 2 + $i-w div 2}, {$i-y-min}
						 L {$width div 2 + $i-w div 2}, {$i-y-max - $i-w div 2}
						 L {$width div 2 + $i-w * 1.2}, {$i-y-max - $i-w div 2}
						 L {$width div 2 + $i-w * 1.2}, {$i-y-max}
						 L {$width div 2 - $i-w * 1.2}, {$i-y-max}
						 L {$width div 2 - $i-w * 1.2}, {$i-y-max - $i-w div 2}
						 L {$width div 2 - $i-w div 2}, {$i-y-max - $i-w div 2}
						 L {$width div 2 - $i-w div 2}, {$i-y-min + $i-w div 2}
						 L {$width div 2 - $i-w * 1.2}, {$i-y-min + $i-w div 2}
						 z"
					stroke="{$color}"
					stroke-width="{$stroke-width}"
					fill="none"/>
  			</g>
  		</svg>
  		
  	</xsl:template>
  	
  	<xsl:template name="icon-answers">
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width" select="$icon-stroke-width"/>
  		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
  			<g>
  				<xsl:call-template name="tick">
  					<xsl:with-param name="width" select="$width"/>
  					<xsl:with-param name="height" select="$height"/>
  					<xsl:with-param name="stroke-color" select="$color"/>
  					<xsl:with-param name="fill-color">none</xsl:with-param>
  					<xsl:with-param name="stroke-width" select="$stroke-width"/>
  				</xsl:call-template>
  			</g>
  		</svg>
  		
  	</xsl:template>
  	
  	<xsl:template name="tick">
		<xsl:param name="width"/>
		<xsl:param name="height"/>
		<xsl:param name="stroke-color"/>
		<xsl:param name="fill-color"/>
		<xsl:param name="stroke-width">1</xsl:param>
		<xsl:variable name="tick-width" select="$width div 6"/>
		<path d="M {$width div 2}, {$height div 2} 
				 L {$width - $stroke-width}, {$stroke-width} 
				 L {$width div 2} {$height div 2 + $tick-width} 
				 L {$width div 5}, {$height div 2} 
				 L {$width div 5 + $tick-width}, {$height div 2 - $tick-width} 
				 z" 
			stroke-width="{$stroke-width}" 
			stroke="{$stroke-color}"
			fill="{$fill-color}"/>
		
  	</xsl:template>
  	
  	<xsl:template name="tab-box">
		<svg width="{$main-width}" height="{$tab-height}" viewBox="0 0 {$main-width} {$tab-height}">
			<defs>
				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">bar-filter</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$widget-active-light"/>
					<xsl:with-param name="show-shadow">true</xsl:with-param>
					<xsl:with-param name="light-x" select="$main-width div 2"/>
					<xsl:with-param name="light-y" select="$main-height"/>					
				</xsl:call-template>				
			</defs>
			<g>
				<rect x="{-$main-width}" y="{-$tab-height}" width="{$main-width * 3}" height="{$tab-height * 3}" fill="{$window-background}" stroke="none"/>
				<rect x="{-$main-width}" y="{-$tab-height}" width="{$main-width * 3}" height="{$tab-height + $tab-gap}" fill="{$widget-active-background}" stroke="none" filter="url(#bar-filter)"/>
			</g>
		</svg>  		
  	</xsl:template>

  	<xsl:template name="icon-expert">
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width" select="$icon-stroke-width"/>
  		
  		<xsl:variable name="lense-width" select="$width * 0.40"/>
  		<xsl:variable name="lense-height" select="$lense-width div 2"/>
  		<xsl:variable name="lense-rounding-top" select="$lense-height div 4"/>
  		<xsl:variable name="lense-rounding-bottom" select="$lense-height div 2"/>
  		<xsl:variable name="lense-gap" select="$width - $lense-width * 2 - $stroke-width"/>
  		
  		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
  			<defs>
  				<path d="M {$lense-rounding-top} 0 
  						 L {$lense-width - $lense-rounding-top}, 0 
  						 A {$lense-rounding-top}, {$lense-rounding-top} 0 0, 1 {$lense-width} {$lense-rounding-top}
  						 L {$lense-width}, {$lense-height - $lense-rounding-bottom}
  						 A {$lense-rounding-bottom}, {$lense-rounding-bottom} 0 0, 1 {$lense-width - $lense-rounding-bottom}, {$lense-height}
  						 L {$lense-rounding-bottom}, {$lense-height}
  						 A {$lense-rounding-bottom}, {$lense-rounding-bottom} 0 0, 1 0, {$lense-height - $lense-rounding-bottom}
  						 L 0, {$lense-rounding-top}
  						 A {$lense-rounding-top}, {$lense-rounding-top} 0 0, 1 {$lense-rounding-top}, 0"
  					fill="none"
  					stroke="{$color}"
  					stroke-width="{$stroke-width}"
  					id="lense"/>
  			</defs>
  			<g>
  				<text x="{$width div 2}" y="{$height - $lense-height - $stroke-width * 4}" fill="none" stroke="{$color}" stroke-width="{$stroke-width}" text-anchor="middle" font-family="serif" font-weight="bold" font-size="{$height - $lense-height}">?</text> 
  				<g transform="translate(0, {$height - $lense-height - $stroke-width * 2})">
					<use x="{$width div 2 - $lense-gap div 2 - $lense-width}" y="0" xlink:href="#lense"/>
					<use x="{$width div 2 - $lense-gap div 2 - $lense-width}" y="0" xlink:href="#lense" transform="translate({$width}, 0) scale(-1, 1)"/>
					<path d="M {$width div 2 - $lense-gap div 2} {$lense-height div 2}
							 A {$lense-gap} {$lense-gap} 0 0, 1 {$width div 2 + $lense-gap div 2} {$lense-height div 2}"
						fill="none"
						stroke="{$color}"
						stroke-width="{$stroke-width}"/>
				</g>
  			</g>
  		</svg>
  	</xsl:template>
  	
  	<xsl:template name="icon-project">
  		<xsl:param name="width" select="$tab-width div 2"/>
  		<xsl:param name="height" select="$tab-height div 2"/>
  		<xsl:param name="color" select="$icon-stroke-color"/>
  		<xsl:param name="stroke-width" select="$icon-stroke-width"/>
  		
  		<xsl:variable name="outer-radius" select="$height div 8"/>
  		<xsl:variable name="inner-radius" select="$outer-radius div 2"/>
		<xsl:variable name="p-y" select="$outer-radius * 3"/>  		
		<xsl:variable name="p-x" select="$width div 4"/>
		<xsl:variable name="p-w">3</xsl:variable>
		
		<xsl:variable name="m-radius" select="$height div 4"/>
  		
  		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
  			<defs>
  				
  			</defs>
  			<g>
				<clipPath id="circle">
			    	<path d="M {$width div 2} {$p-y + $p-w} L {$width div 2 - $p-x} {$height} L {$width div 2 + $p-x} {$height} z"/>
			  	</clipPath>  		
			 	<circle cx="{$width div 2}" cy="{$outer-radius + $stroke-width}" r="{$outer-radius}" stroke="{$color}" stroke-width="{$stroke-width}" fill="none"/>
  				<circle cx="{$width div 2}" cy="{$outer-radius + $stroke-width}" r="{$inner-radius}" stroke="{$color}" stroke-width="{$stroke-width}" fill="none"/>
				<line x1="{$width div 2}" y1="{$outer-radius * 2 + $stroke-width}" x2="{$width div 2}" y2="{$p-y}" stroke="{$color}" stroke-width="{$stroke-width * 2}" stroke-linecap="butt"/>
				<path d="M {$width div 2 - $p-w div 2}, {$p-y} L {$width div 2 - $p-x} {$height - $stroke-width} L {$width div 2}, {$p-y + $p-w} L {$width div 2 + $p-x}, {$height - $stroke-width} L {$width div 2 + $p-w div 2 + 1}, {$p-y} z" stroke="{$color}" stroke-width="{$stroke-width}" fill="none"/>
				<circle cx="{$width div 2}" cy="{$p-y + $p-w}" r="{$m-radius}" stroke="{$color}" stroke-width="{$stroke-width}" fill="none" clip-path="url(#circle)"/>
				<circle cx="{$width div 2}" cy="{$p-y + $p-w}" r="{$m-radius + ($outer-radius - $inner-radius)}" stroke="{$color}" stroke-width="{$stroke-width}" fill="none" clip-path="url(#circle)"/>
  			</g>
  		</svg>
  	</xsl:template>
  	
  	<xsl:template name="gradient-box">
  		<xsl:param name="width" select="$main-width"/>
  		<xsl:param name="height" select="$main-height"/>
  		<xsl:param name="background" select="$widget-active-background"/>
  		<xsl:param name="light" select="$widget-active-light"/>
		<svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}" version="1.1">
			<defs>
				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">bg-filter</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$light"/>
					<xsl:with-param name="show-shadow">false</xsl:with-param>
					<xsl:with-param name="light-x" select="$main-width div 2"/>
					<xsl:with-param name="light-y" select="0"/>					
				</xsl:call-template>
				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">heading-filter</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$light"/>
					<xsl:with-param name="show-shadow">true</xsl:with-param>
					<xsl:with-param name="light-x" select="$main-width div 2"/>
					<xsl:with-param name="light-y" select="0"/>					
				</xsl:call-template>				
			</defs>
			<g>
				<rect x="{-$width}" y="{-$height}" width="{$width * 3}" height="{$height * 3}" fill="{$background}" stroke="none" filter="url(#bg-filter)"/>
				<!--  drop a shadow over the top -->
				<rect x="0" y="{-$height}" width="{$width}" height="{$height}" fill="{$background}" stroke="none" filter="url(#heading-filter)"/>
			</g>
		</svg>
  		
  	</xsl:template>
  	
  	<xsl:template name="tab">
  		<xsl:param name="above-bar-lighting-color" select="$widget-active-light"/>
  		<xsl:param name="tab-fill-color" select="$widget-active-background"/>
  		<xsl:param name="tab-fill-light" select="$widget-active-light"/>
  		<xsl:param name="tab-stroke-width" select="$widget-stroke-width"/>
  		<xsl:param name="tab-top" select="$tab-gap"/>
  		<xsl:param name="above-bar-fill-color"/>
  		<xsl:param name="inactive">false</xsl:param>
  		
		<svg width="{$tab-width}" height="{$tab-height}" viewBox="0 0 {$tab-width} {$tab-height}" version="1.1">
			<xsl:variable name="light-y">
				<xsl:choose>
					<xsl:when test="$inactive = 'false'">
						<xsl:value-of select="$main-height"/>
					</xsl:when>
					<xsl:otherwise>0</xsl:otherwise>
				</xsl:choose>
			</xsl:variable>
			<xsl:variable name="light-z">
				<xsl:choose>
					<xsl:when test="$inactive = 'false'"><xsl:value-of select="$default-light-z"/></xsl:when>
					<xsl:otherwise>40</xsl:otherwise>
				</xsl:choose>			
			</xsl:variable>
			<xsl:variable name="blur">
				<xsl:choose>
					<xsl:when test="$inactive = 'false'">
						<xsl:value-of select="$tab-gap"/>
					</xsl:when>
					<xsl:otherwise><xsl:value-of select="$tab-gap div 2"/></xsl:otherwise>
				</xsl:choose>
			</xsl:variable>
			<defs>
				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">main-filter</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$tab-fill-light"/>
					<xsl:with-param name="show-shadow">true</xsl:with-param>
					<xsl:with-param name="light-x" select="$tab-width div 2"/>
					<xsl:with-param name="light-y" select="$light-y"/>
					<xsl:with-param name="light-z" select="$light-z"/>
					<xsl:with-param name="blur" select="$blur"/>
				</xsl:call-template>
				<xsl:call-template name="gen-filter">
					<xsl:with-param name="name">bar-filter</xsl:with-param>
					<xsl:with-param name="lighting-color" select="$above-bar-lighting-color"/>
					<xsl:with-param name="show-shadow">true</xsl:with-param>
					<xsl:with-param name="light-x" select="$tab-width div 2"/>
					<xsl:with-param name="light-y" select="$main-height"/>
				</xsl:call-template>
			</defs>
	    	<g>
	    		<path d="M {-$tab-width}, {-$tab-height} 
	    				 L {-$tab-width}, {$tab-top}
	    				 L 0 {$tab-top}
	    				 A {$tab-gap}, {$tab-gap} 0 0, 1 {$tab-gap}, {$tab-top + $tab-gap}
	    				 V {$tab-height - $tab-rounding - $tab-gap}
	    				 A {$tab-rounding}, {$tab-rounding} 0 0, 0 {$tab-gap + $tab-rounding}, {$tab-height - $tab-gap}
	    				 H {$tab-width - $tab-rounding - $tab-gap}
	    				 A {$tab-rounding}, {$tab-rounding} 0 0, 0 {$tab-width - $tab-gap}, {$tab-height - $tab-rounding - $tab-gap}
	    				 V {$tab-top + $tab-gap}
	    				 A {$tab-gap}, {$tab-gap} 0 0, 1 {$tab-width},  {$tab-top}
	    				 L {$tab-width * 2}, {$tab-top}
	    				 L {$tab-width * 2}, {-$tab-height}"
	    				  
	    			  stroke="none"
	    			  stroke-width="{$tab-stroke-width}"
	    			  fill="{$tab-fill-color}"
	    			  filter="url(#main-filter)"/>
	    		<xsl:if test="$above-bar-fill-color">
		    		<path d="M {-$tab-width}, {-$tab-height} L {-$tab-width}, {$tab-top} L {$tab-width * 2}, {$tab-top} L {$tab-width * 2}, {-$tab-height} z" fill="{$above-bar-fill-color}" filter="url(#bar-filter)">
		    		</path>
	    		</xsl:if>
	        </g>
		</svg>	  
  	</xsl:template>
  	
  	<xsl:template name="gen-filter">
  		<xsl:param name="name"/>
  		<xsl:param name="show-shadow"/>
  		<xsl:param name="lighting-color"/>
  		<xsl:param name="blur" select="$tab-gap"/>
  		<xsl:param name="light-x">0</xsl:param>
  		<xsl:param name="light-y">0</xsl:param>
  		<xsl:param name="light-z" select="$default-light-z"/>
  		
		<filter id="{$name}" filterUnits="objectBoundingBox" x="-100%" y="-100%" width="300%" height="300%">
	      <feGaussianBlur in="SourceAlpha" stdDeviation="{$blur div 2}" result="blur"/>
	      <feOffset in="blur" dx="0" dy="0" result="offsetBlur"/>
	      <feSpecularLighting in="blur" surfaceScale="{$blur}" specularConstant=".6" 
	                          specularExponent="20" lighting-color="{$lighting-color}"  
	                          result="specOut">
	        <fePointLight x="{$light-x}" y="{-$light-y}" z="{$light-z}"/>
	      </feSpecularLighting>
	      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
	      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
	                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
	      <feMerge>
	        <xsl:if test="$show-shadow = 'true'">
	        	<feMergeNode in="blur"/>
	        </xsl:if>
	        <feMergeNode in="litPaint"/>
	      </feMerge>
	    </filter>
  	
  	</xsl:template>

</xsl:stylesheet>